<template>
  <view v-if="type === 1" :class="['titleType', 'titleType1', { disabled }]"
    >出售</view
  >
  <view
    v-else-if="type === 2"
    :class="['titleType', 'titleType2', { disabled }]"
    >赠送</view
  >
  <view
    v-else-if="type === 3"
    :class="['titleType', 'titleType3', { disabled }]"
    >求购</view
  >
  <view
    v-else-if="type === 4"
    :class="['titleType', 'titleType4', { disabled }]"
    >求助</view
  >
</template>

<script>
import { defineComponent, ref, toRef } from "vue";
export default defineComponent({
  props: {
    type: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const type = toRef(props, "type");
    const disabled = toRef(props, "disabled");

    return {
      type,
      disabled,
    };
  },
});
</script>

<style lang="scss">
.titleType {
  width: 90rpx;
  height: 34rpx;
  border-radius: 15rpx;
  font-size: 22rpx;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;

  &1 {
    background: linear-gradient(90deg, #77d187 0%, #9bcf80 100%);
  }
  &2 {
    background: linear-gradient(
      90deg,
      rgba(123, 137, 232, 1) 0%,
      rgba(169, 151, 238, 1) 100%
    );
  }
  &3 {
    background: linear-gradient(
      90deg,
      rgba(233, 143, 88, 1) 0%,
      rgba(236, 183, 130, 1) 100%
    );
  }
  &4 {
    background: linear-gradient(
      90deg,
      rgba(244, 122, 128, 1) 0%,
      rgba(244, 91, 77, 1) 100%
    );
  }

  &.disabled {
    background: rgba(153, 153, 153, 1);
  }
}
</style>
